<template>
	<view>
		<nav-box :title="title"></nav-box>
		<view class="content">
			<text class="content-title">{{type == 1 ? '培训' : '测评'}}详情</text>
			<view class="info-box">
					<view class="info-item">
						<text>名称：</text>
						<text>{{taskInfo.name}}</text>
					</view>
					<view class="info-item">
						<text>时间：</text>
						<text>{{taskInfo.time}}</text>
					</view>
					<view class="info-item">
						<text>地点：</text>
						<text>{{taskInfo.address}}</text>
					</view>
					<view class="info-item">
						<text>组织人：</text>
						<text>{{taskInfo.person}}</text>
					</view>
					<view class="info-item">
						<text>内容：</text>
						<text>{{taskInfo.content}}</text>
					</view>
					
				</view>
			</view>
			<view class="btn-box">
				<u-button hover-class="none" shape="circle" class="custom-style" @click="sign">去{{type == 1 ? '培训' : '测评'}}</u-button>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				type: null, //1 培训  2测评
				taskInfo: {
					name: '第4批基础知识培训',
					time: '2021/03/15  15:30',
					address: '和平院区六号楼2楼会议室',
					person: '李某',
					content: '参加培训的内容信息'
				}
			}
		},
		onLoad(options) {
			this.title = options.title
			this.type = options.type
		},
		methods: {
			// 去测评或者培训逻辑
			sign() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
	.content {
		padding: 40upx 32upx;
		.content-title {
			display: inline-block;
			margin-bottom: 40upx;
			font-size: 32upx;
			color: #2B2B2B;
			font-weight: 500;
		}
		.info-box {
			.info-item {
				margin-bottom: 20upx;
				&:nth-of-type(4) {
					text {
						&:first-child {
							margin-right: 4upx;
						}
					}
				}
				text {
					display: inline-block;
					&:first-child {
						color: #2B2B2B;
						margin-right: 32upx;
					}
					&:nth-of-type(2) {
						color: #6E6E6E;
					}
				}
			}			
		}
	}
	.btn-box {
		position: fixed;
		bottom: 30upx;
		padding: 0 32upx;
		width: 100%;
		.custom-style {
			color: #FFFFFF;
			background-color: $color-2d6;
		}
	}
}
</style>
